import React, { Component } from 'react';
import PropTypes from 'prop-types';
import cx from 'classnames';

const emptyRichtext =
  '<p>请点击此处编辑文本内容，您可以自由改变文本样式</p><p>也可以在文本中添加图片、视频以及超链接等内容；</p>';

export default class RichtextPreview extends Component {
  static propTypes = {
    value: PropTypes.object,
    design: PropTypes.object,
  };

  render() {
    const { value } = this.props;
    const content = value.content || emptyRichtext;
    const { fullscreen, color } = value;

    return (
      <div
        dangerouslySetInnerHTML={{ __html: content }} // eslint-disable-line
        className={cx('zent-design-component-richtext-preview', {
          'zent-design-component-richtext-preview--fullscreen': fullscreen,
        })}
        style={{ backgroundColor: color }}
      />
    );
  }
}
